import React, { Component, PureComponent } from 'react';
import { StyleSheet, Text, View, Button, DeviceEventEmitter } from 'react-native';
import styles from 'src/styles';

// The navigate action will update the current state with the result of a navigate action.

// routeName - String - Required - A destination routeName that has been registered somewhere in the app's router
// params - Object - Optional - Params to merge into the destination route
// action - Object - Optional - (advanced) The sub-action to run in the child router, if the screen is a navigator. Any one of the actions described in this doc can be set as a sub-action.
// key - String - Optional - The identifier for the route to navigate to. Navigate back to this route if it already exists

// const navigateAction = NavigationActions.navigate({
//   routeName: 'Profile',
//   params: {},
//   action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
// });

function onRole(navigation, userRole) {
  console.log('on User Role: ', userRole);
  // navigation.navigate('child');
  // navigation.navigate('tab', { tabs: ['home', 'child'], screen: 'child' });
  navigation.navigate('main', { userRole }, navigation.navigate('tab', {userRole}));
};

function Welcome({ navigation }) {
  return (
    <View style={styles.container}>
      <Text>Welcome Try: Perfect Solution Dynamic Tabs for Now</Text>
      <View style={{width: '90%', padding: 10, marginTop: 10, backgroundColor: '#eee'}}>
        <Text>Navigate to main bottomTabNavigator with params</Text>
        <Button title='Parent Role' onPress={() => { onRole(navigation, 'parent') }} />
        <Button title='Child Role' onPress={() => { onRole(navigation, 'child') }} />
      </View>
      <View style={{ width: '90%', padding: 10, marginTop: 10, backgroundColor: '#eee' }}>
        <Text>Navigate to top level page of switch navigator</Text>
        <Button title='Show Other Page' onPress={() => navigation.navigate('other')} />
      </View>
      <View style={{ width: '90%', padding: 10, marginTop: 10, backgroundColor: '#eee' }}>
        <Text>Navigate to top level page of switch navigator</Text>
        <Button title='Ant Design' onPress={() => navigation.navigate('antd')} />
      </View>
    </View>
  )
}

export default Welcome;
